require("../../both/base.js");
require('./UserIndexContainer.scss');
import PersonSlider from "../Personal/PersonSlider/PersonSlider.jsx"
import PersonMenu from "../Personal/PersonMenu/PersonMenu.jsx"
import PersonList from "../Personal/PersonList/PersonList.jsx"
import UserRegister from "../UserRegister/UserRegister.jsx"

var $ = jQuery
require("imports-loader?$=jquery!../../../../../node_modules/jquery-lazyload/jquery.lazyload.js")

class UserIndexContainer extends React.Component {
    constructor(props){
        super(props)

        this.state = {
            scrolling : false
        }
    }

    componentDidMount(){
        var self = this
        $("img.lazy").lazyload();


        // document.body.scrollTop = 2844
        // 滚动动画去除
        // if(! self.props.logined){
        //     var registerDom = document.getElementById("register")
        //
        //     var beforeScrollTop = document.body.scrollTop+document.documentElement.scrollTop;
        //
        //     window.document.addEventListener("scroll",function(e){
        //         // 如果到达顶端而且没有在scroll
        //         var sTop=document.body.scrollTop+document.documentElement.scrollTop;
        //         var clientHeight = document.documentElement.clientHeight
        //
        //         if(
        //             sTop + clientHeight - registerDom.offsetTop >= 0
        //             && !self.state.scrolling
        //             && sTop - beforeScrollTop > 0   // 如果没有在滚动而且是向下滑动
        //         ){
        //
        //             // console.log("显示")
        //             self.state.scrolling = true
        //
        //             var it = setInterval(() => {
        //                 if(document.body.scrollTop >= registerDom.offsetTop){
        //                     clearInterval(it)
        //                     self.state.scrolling = false
        //                     return
        //                 }
        //                 document.body.scrollTop += 5
        //             },1)
        //
        //         } else if (
        //             sTop - beforeScrollTop < 0
        //             && !self.state.scrolling
        //             && document.body.scrollHeight  - (sTop + clientHeight) < clientHeight  // 距离底部的距离小于屏幕高度而且向上划
        //         ){
        //
        //             // console.log("往回滑动")
        //             self.state.scrolling = true
        //
        //             var it = setInterval(() => {
        //                 if(document.body.scrollHeight - (document.body.scrollTop+document.documentElement.scrollTop) >= document.documentElement.clientHeight * 2){   // 全高减去卷高大于屏幕高度
        //                     clearInterval(it)
        //                     self.state.scrolling = false
        //                     return
        //                 }
        //                 document.body.scrollTop -= 5
        //             },1)
        //
        //         }
        //
        //         beforeScrollTop = sTop
        //
        //     })
        //
        //     function MouseWheel(e) {
        //         if(! self.state.scrolling){
        //             return
        //         }
        //         e = e || window.event;
        //
        //         if (e.stopPropagation) e.stopPropagation();
        //         else e.cancelBubble = true;
        //
        //         if (e.preventDefault) e.preventDefault();
        //         else e.returnValue = false;
        //
        //     }
        //
        //     window.document.addEventListener("DOMMouseScroll",MouseWheel)
        //
        //     window.document.addEventListener("mousewheel",MouseWheel)
        // }
    }


    render() {
        const {courses,pictures} = this.props

        return (<div className="user_index_cr bln">
            <div className="bk"></div>
            <section className="mooc-slider">
                <PersonSlider pictures={pictures}/>
                <PersonMenu />
            </section>
            <section className="mooc-list">
                <PersonList  courses={courses[0]} title="WEB开发推荐" coverImg="/p_dist/images/main_web.png" desc="零基础入门前后端" href="/courses?major=web"/>
                <PersonList  courses={courses[1]} title="Android开发推荐" coverImg="/p_dist/images/main_android.png" desc="安卓开发入门与提高" href="/courses?major=android"/>
                <PersonList  courses={courses[2]} title="IOS开发推荐" coverImg="/p_dist/images/main_ios.png" desc="IOS最新APP开发" href="/courses?major=ios"/>
                <PersonList  courses={courses[3]} title="UI设计推荐" coverImg="/p_dist/images/main_ui.png" desc="UI最新设计介绍" href="/courses?major=ui"/>
                <PersonList  courses={courses[4]} title="智能硬件开发推荐" coverImg="/p_dist/images/main_qianrushi.png" desc="嵌入式基础" href="/courses?major=qianrushi"/>
            </section>
            {
                this.props.logined ? null :
                <section className="mooc-register" id="register">
                    <UserRegister />
                </section>
            }
        </div>)
    }
}

export default UserIndexContainer;